<template>
  <el-footer>
    <!-- <div>测试显示内容</div> -->
    <!--     <el-button
        type="primary"
        @click="goTest"
        v-no-more-click
      >测试按钮</el-button> -->
    <div>
      <transition name="el-zoom-in-bottom">
        <div
          v-show="show"
          class="transition-box"
        >xxx系统,联系电话xxx
        </div>
      </transition>
    </div>

  </el-footer>
</template>
  
  <script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    goTest() {
      //this.$router.push("maincontent");
      //this.$router.push("qqmap");
    },
    Toshow() {
      this.show = !this.show;
    },
  },
  mounted() {
    this.Toshow();
  },
};
</script>
  
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="scss" scoped>
.el-footer {
  position: absolute;
  bottom: 0; /* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 */
  width: 100%;
  background-color: rgba(0, 128, 0, 0);
  vertical-align: middle;
  text-align: center;
  height: 30px;
  line-height: 60px;
}
.transition-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  background-color: #409eff;
  opacity: 0.2;
  text-align: center;
  color: #fff;
  /* padding: 15px 20px; */
  box-sizing: border-box;
  margin-right: 20px;
}
</style>